<!--
 * @Author: Bennty
 * @Date: 2024-07-15 08:44:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-08-29 11:11:48
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="分配客户" @close="handleClose" width="20%" destroy-on-close>
        <el-form ref="form" :model="form" label-width="auto">
            <el-form-item label="客户名称" align="right">{{ userInfo.customerName }}</el-form-item>
            <el-form-item label="客户级别" align="right">
                <template #default="scope">
                        <span class="level-one" v-if="userInfo.customerLevel == '1'">一级客户</span>
                        <span class="level-two" v-else-if="userInfo.customerLevel == '2'">二级客户</span>
                        <span class="level-three" v-else-if="userInfo.customerLevel == '3'">三级客户</span>
                        <span class="level-four" v-else-if="userInfo.customerLevel == '4'">四级客户</span>
                        <span class="level-five" v-else-if="userInfo.customerLevel == '5'">五级客户</span>
                    </template>
            </el-form-item>
            <el-form-item label="目前所属业务员" align="right">{{ userInfo.personName }}</el-form-item>
            <el-form-item label="分配所属业务员" align="right" prop="personId">
                <el-select v-model="formData.personId" placeholder="请输入业务员名称" clearable filterable >
                    <el-option v-for="user in props.users" :key="user.userId" :label="user.userName" :value="user.userId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getCustomerByIdApi, allocationCustomerApi } from '@/api/sj/customer-crm/index';

const form = ref<FormInstance>();
const props = defineProps(['visible','data','users']);
const emit = defineEmits(['submit','close']);
const userInfo = ref<any>({});

const formData = ref({
    customerId: undefined,
    customerName: undefined,
    personId: undefined,
    personName: undefined,
});

const getUserById = async ()=>{
    const { data } = await getCustomerByIdApi(props.data.id);
    userInfo.value = data;
};

watch(() => props.data, ()=>{
    getUserById();
    formData.value.customerId = props.data.id;
    formData.value.customerName = props.data.customerName;
});

watch(()=>formData.value.personId, ()=>{
    const name = props.users.filter((item:any)=>item.userId === formData.value.personId)[0]?.userName;
    formData.value.personName = name;
});

const handleSubmit = async () => {
    await allocationCustomerApi(formData.value).then((result)=>{
        emit('submit',true);
        handleClose();
    }).catch((error)=>{
        emit('submit',false);
    });
};

const handleClose = ()=>{
    // form.value?.resetFields();
    formData.value.personId = undefined;
    formData.value.personName = undefined;
    emit('close');
};

</script>

<style lang="scss" scoped>
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>